{include file="include:headerFile" /}
{include file="include:header" /}
{include file="include:banner" /}
<main>
    {include file="include:crumbs" /}

    {volist name="pagePartList" id="pagePart"}

    {if $pagePart.name == 'history' }
    {notempty name='developmentHistoryList'}
    <section>
        <div class="about-s3-mid">
            <div class="about-s3-kuang w1600">
                <p class="about-s1-title">The History Of HIPO Outdoor Lighting</p>
                <div class="swiper mySwiper2 neirongswiper">
                    <div class="swiper-wrapper">
                        {volist name="developmentHistoryList" id="vo"}
                        <div class="swiper-slide">
                            <div class="nfswiper-big">{$vo.year}
                                <div class="nfswiper-neirong">
                                    <div class="">
                                        {$vo.content | raw}
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>
                <div thumbsSlider="" class="swiper mySwiper nfswiper">
                    <div class="swiper-button-prev">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
                             width="14" height="14" viewBox="0 0 14 14">
                            <g>
                                <g></g>
                                <g></g>
                                <g>
                                    <path
                                            d="M10.78242,3.783268L10.78284,3.782843Q10.8391,3.726582,10.86955,3.653073Q10.9,3.5795649,10.9,3.5Q10.9,3.420435,10.86955,3.346926Q10.8391,3.273418,10.78284,3.217157Q10.78101,3.215327,10.779160000000001,3.21352Q10.72314,3.158931,10.650680000000001,3.129465Q10.57822,3.1,10.5,3.1L10.49557,3.100025Q10.417159999999999,3.100893,10.34488,3.131301Q10.2726,3.1617100000000002,10.21716,3.217157L3.217157,10.21716Q3.160896,10.27342,3.130448,10.34693Q3.1,10.42043,3.1,10.5Q3.1,10.50961,3.100462,10.519210000000001Q3.107885,10.67357,3.217157,10.78284Q3.273418,10.8391,3.346927,10.86955Q3.420435,10.9,3.5,10.9Q3.5795649,10.9,3.653073,10.86955Q3.726582,10.8391,3.782843,10.78284L3.783268,10.78242L10.78242,3.783268Z"
                                            fill-rule="evenodd" fill="currentColor" fill-opacity="1"/>
                                </g>
                                <g>
                                    <path
                                            d="M10.100059070587157,3.900000238418579L10.100059070587157,9.19000023841858Q10.100059070587157,9.22940023841858,10.107749070587158,9.268040238418578Q10.115429070587158,9.30668023841858,10.13050907058716,9.34307023841858Q10.145579070587157,9.37947023841858,10.167469070587158,9.41223023841858Q10.189359070587159,9.44498023841858,10.21721907058716,9.472840238418579Q10.245069070587158,9.50070023841858,10.277829070587158,9.52259023841858Q10.31058907058716,9.54447023841858,10.346989070587158,9.559550238418579Q10.383379070587157,9.574630238418578,10.422019070587158,9.582310238418579Q10.460659070587159,9.590000238418579,10.50005907058716,9.590000238418579Q10.539459070587158,9.590000238418579,10.578099070587157,9.582310238418579Q10.616739070587158,9.574630238418578,10.653129070587159,9.559550238418579Q10.68952907058716,9.54447023841858,10.72228907058716,9.52259023841858Q10.75503907058716,9.50070023841858,10.782899070587158,9.472840238418579Q10.810759070587158,9.44498023841858,10.83264907058716,9.41223023841858Q10.854529070587159,9.37947023841858,10.869609070587158,9.34307023841858Q10.884689070587157,9.30668023841858,10.892369070587158,9.268040238418578Q10.900059070587158,9.22940023841858,10.900059070587158,9.19000023841858L10.900059070587158,3.500000238418579Q10.900059070587158,3.460603638418579,10.892369070587158,3.4219641384185793Q10.884689070587157,3.383324238418579,10.869609070587158,3.346927238418579Q10.854529070587159,3.310529238418579,10.83264907058716,3.2777722384185792Q10.810759070587158,3.245015238418579,10.782899070587158,3.217157238418579Q10.75503907058716,3.1893002384185793,10.72228907058716,3.167412238418579Q10.68952907058716,3.1455252384185792,10.653129070587159,3.130448238418579Q10.616739070587158,3.115372238418579,10.578099070587157,3.1076862384185793Q10.539459070587158,3.100000238418579,10.50005907058716,3.100000238418579L4.810059070587158,3.100000238418579Q4.770662470587158,3.100000238418579,4.732022970587158,3.1076862384185793Q4.693383070587158,3.115372238418579,4.656986070587158,3.130448238418579Q4.620588070587158,3.1455252384185792,4.587831070587158,3.167412238418579Q4.555074070587159,3.1893002384185793,4.5272160705871585,3.217157238418579Q4.4993590705871584,3.245015238418579,4.477471070587158,3.2777722384185792Q4.455584070587158,3.310529238418579,4.4405070705871585,3.346927238418579Q4.425431070587158,3.383324238418579,4.417745070587158,3.4219641384185793Q4.410059070587158,3.460603638418579,4.410059070587158,3.500000238418579Q4.410059070587158,3.539396838418579,4.417745070587158,3.578036338418579Q4.425431070587158,3.616676238418579,4.4405070705871585,3.653073238418579Q4.455584070587158,3.6894712384185793,4.477471070587158,3.722228238418579Q4.4993590705871584,3.754985238418579,4.5272160705871585,3.7828432384185793Q4.555074070587159,3.810700238418579,4.587831070587158,3.832588238418579Q4.620588070587158,3.854475238418579,4.656986070587158,3.869552238418579Q4.693383070587158,3.8846282384185793,4.732022970587158,3.892314238418579Q4.770662470587158,3.900000238418579,4.810059070587158,3.900000238418579L10.100059070587157,3.900000238418579Z"
                                            fill-rule="evenodd" fill="currentColor" fill-opacity="1"/>
                                </g>
                            </g>
                        </svg>
                    </div>
                    <div class="swiper-wrapper">
                        {volist name="developmentHistoryList" id="vo"}
                        <div class="swiper-slide">
                            <div class="nfswiper-quan">
                                <span></span>
                                <p class="nfswiper-time">{$vo.year}</p>
                            </div>
                        </div>
                        {/volist}
                    </div>
                    <div class="swiper-button-next">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
                             width="14" height="14" viewBox="0 0 14 14">
                            <g>
                                <g></g>
                                <g></g>
                                <g>
                                    <path
                                            d="M10.78242,3.783268L10.78284,3.782843Q10.8391,3.726582,10.86955,3.653073Q10.9,3.5795649,10.9,3.5Q10.9,3.420435,10.86955,3.346926Q10.8391,3.273418,10.78284,3.217157Q10.78101,3.215327,10.779160000000001,3.21352Q10.72314,3.158931,10.650680000000001,3.129465Q10.57822,3.1,10.5,3.1L10.49557,3.100025Q10.417159999999999,3.100893,10.34488,3.131301Q10.2726,3.1617100000000002,10.21716,3.217157L3.217157,10.21716Q3.160896,10.27342,3.130448,10.34693Q3.1,10.42043,3.1,10.5Q3.1,10.50961,3.100462,10.519210000000001Q3.107885,10.67357,3.217157,10.78284Q3.273418,10.8391,3.346927,10.86955Q3.420435,10.9,3.5,10.9Q3.5795649,10.9,3.653073,10.86955Q3.726582,10.8391,3.782843,10.78284L3.783268,10.78242L10.78242,3.783268Z"
                                            fill-rule="evenodd" fill="currentColor" fill-opacity="1"/>
                                </g>
                                <g>
                                    <path
                                            d="M10.100059070587157,3.900000238418579L10.100059070587157,9.19000023841858Q10.100059070587157,9.22940023841858,10.107749070587158,9.268040238418578Q10.115429070587158,9.30668023841858,10.13050907058716,9.34307023841858Q10.145579070587157,9.37947023841858,10.167469070587158,9.41223023841858Q10.189359070587159,9.44498023841858,10.21721907058716,9.472840238418579Q10.245069070587158,9.50070023841858,10.277829070587158,9.52259023841858Q10.31058907058716,9.54447023841858,10.346989070587158,9.559550238418579Q10.383379070587157,9.574630238418578,10.422019070587158,9.582310238418579Q10.460659070587159,9.590000238418579,10.50005907058716,9.590000238418579Q10.539459070587158,9.590000238418579,10.578099070587157,9.582310238418579Q10.616739070587158,9.574630238418578,10.653129070587159,9.559550238418579Q10.68952907058716,9.54447023841858,10.72228907058716,9.52259023841858Q10.75503907058716,9.50070023841858,10.782899070587158,9.472840238418579Q10.810759070587158,9.44498023841858,10.83264907058716,9.41223023841858Q10.854529070587159,9.37947023841858,10.869609070587158,9.34307023841858Q10.884689070587157,9.30668023841858,10.892369070587158,9.268040238418578Q10.900059070587158,9.22940023841858,10.900059070587158,9.19000023841858L10.900059070587158,3.500000238418579Q10.900059070587158,3.460603638418579,10.892369070587158,3.4219641384185793Q10.884689070587157,3.383324238418579,10.869609070587158,3.346927238418579Q10.854529070587159,3.310529238418579,10.83264907058716,3.2777722384185792Q10.810759070587158,3.245015238418579,10.782899070587158,3.217157238418579Q10.75503907058716,3.1893002384185793,10.72228907058716,3.167412238418579Q10.68952907058716,3.1455252384185792,10.653129070587159,3.130448238418579Q10.616739070587158,3.115372238418579,10.578099070587157,3.1076862384185793Q10.539459070587158,3.100000238418579,10.50005907058716,3.100000238418579L4.810059070587158,3.100000238418579Q4.770662470587158,3.100000238418579,4.732022970587158,3.1076862384185793Q4.693383070587158,3.115372238418579,4.656986070587158,3.130448238418579Q4.620588070587158,3.1455252384185792,4.587831070587158,3.167412238418579Q4.555074070587159,3.1893002384185793,4.5272160705871585,3.217157238418579Q4.4993590705871584,3.245015238418579,4.477471070587158,3.2777722384185792Q4.455584070587158,3.310529238418579,4.4405070705871585,3.346927238418579Q4.425431070587158,3.383324238418579,4.417745070587158,3.4219641384185793Q4.410059070587158,3.460603638418579,4.410059070587158,3.500000238418579Q4.410059070587158,3.539396838418579,4.417745070587158,3.578036338418579Q4.425431070587158,3.616676238418579,4.4405070705871585,3.653073238418579Q4.455584070587158,3.6894712384185793,4.477471070587158,3.722228238418579Q4.4993590705871584,3.754985238418579,4.5272160705871585,3.7828432384185793Q4.555074070587159,3.810700238418579,4.587831070587158,3.832588238418579Q4.620588070587158,3.854475238418579,4.656986070587158,3.869552238418579Q4.693383070587158,3.8846282384185793,4.732022970587158,3.892314238418579Q4.770662470587158,3.900000238418579,4.810059070587158,3.900000238418579L10.100059070587157,3.900000238418579Z"
                                            fill-rule="evenodd" fill="currentColor" fill-opacity="1"/>
                                </g>
                            </g>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {/notempty}
    {elseif $pagePart.name == 'patented_technologies' /}
    {notempty name='certificationsList'}
    <section>
        <div class="about-s4-mid">
            <div class="about-s4-kuang">
                <div class="index-solution-k-top w1600">
                    {$pagePart.content|raw}
                    <div class="swiper mySwiper aboutzhengshuswiper">
                        <div class="swiper-wrapper baguetteBoxTwo">
                            {volist name="certificationsList" id="vo"}
                            <div class="swiper-slide ">
                                <a class="" href="{$vo.photo}"  title="{$vo.name}">
                                    <img src="{$vo.photo}" alt="{$vo.name}" />
                                    <img src="/static/images/zhengshubiankuang.png"  alt="{$vo.name}">
                                </a>
                            </div>
                            {/volist}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {/notempty}
    {else /}

    {$pagePart.content|raw}

    {/if}

    {/volist}

</main>


{include file="include:footer" /}
{include file="include:footerFile" /}
<script type="text/javascript" src="/static/js/baguetteBox.js"></script>
<script>
    $(".about-s2-bottom .support-kuang").hide();
    $(".about-s2-bottom .support-kuang").eq(0).fadeIn(300);

    $(".about-s2-top ul li").hover(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var index = $(this).index();

        $(".about-s2-bottom .support-kuang").stop(true, true).fadeOut(300); // 先淡出所有
        $(".about-s2-bottom .support-kuang").eq(index).stop(true, true).fadeIn(300); // 再淡入目标
    });


    var nfswiper = new Swiper(".nfswiper", {
        spaceBetween: 10,
        slidesPerView: 2,
        freeMode: true,
        watchSlidesProgress: true,
        breakpoints: {
            992: {
                spaceBetween: 10,
                slidesPerView: 7,
            },
            769: {
                spaceBetween: 10,
                slidesPerView: 4,
            },
            451: {
                spaceBetween: 10,
                slidesPerView: 3,
            }
        }
    });
    var neirongswiper = new Swiper(".neirongswiper", {
        spaceBetween: 10,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
        thumbs: {
            swiper: nfswiper,
        },
    });


    var aboutzhengshuswiper = new Swiper(".aboutzhengshuswiper", {
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        loop: true,
        slidesPerView: 2,
        autoplay:true,
        coverflowEffect: {
            rotate: 0,
            stretch: 24,
            depth: 120,
            modifier: 2,
            slideShadows: false,
        },
        breakpoints: {
            1024: {
                slidesPerView: 4,
            },
            768: {
                slidesPerView: 3,
            },
            451: {
                slidesPerView: 3,
            },
        },
    });
    var plswiper = new Swiper(".plswiper", {
        spaceBetween: 10,
        slidesPerView: 1,
        // loop: true,
        initialSlide: 1
    });

    // 同步<ul>中的<li>与Swiper滑块
    const lis = document.querySelectorAll('.about-s5-pl ul li');
    plswiper.on('slideChange', function () {
        lis.forEach(li => li.classList.remove('active'));
        lis[plswiper.realIndex].classList.add('active');
    });

    // 点击<li>切换Swiper
    lis.forEach((li, index) => {
        li.addEventListener('click', () => {
            plswiper.slideToLoop(index);
        });
    });

</script>
</body>
</html>